@use "../../css/vars/colors" as colors;

.root {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--size__200);
  border-radius: var(--size__050);
  background-color: rgba(0 0 0 / 09%);

  /* Fix overflow clipping in Safari */

  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
  transform: translateZ(0);

  &.isCompleted {
    background-color: transparent;
  }
}

.indicator {
  position: relative;
  width: 100%;
  min-width: 1rem !important;
  height: 100%;
  background-color: var(--color__black--250);
  transition: all 250ms cubic-bezier(0.65, 0, 0.35, 1);

  .isActive & {
    background-color: var(--color__blue--600);
  }

  .isCompleted & {
    background-color: var(--color__green--350);
  }

  .isError & {
    background-color: var(--color__red--350);
  }

  .isInterrupted & {
    background-color: var(--color__yellow--350);
  }

  &::after {
    position: absolute;
    z-index: 1;
    display: block;
    background: transparent;
    content: '';
    inset: 0;

    .isActive & {
      animation: progressPulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
  }
}

@keyframes progressPulse {
  0% {
    background: radial-gradient(ellipse at right, colors.$color__blue--200 50% 90%, transparent 50%);
    opacity: 0.5;
  }

  25% {
    background: radial-gradient(ellipse at right, colors.$color__blue--200 50% 90%, transparent 50%);
    opacity: 0;
  }

  50%  {
    background: radial-gradient(ellipse at right, colors.$color__blue--200 50% 90%, transparent 50%);
    opacity: 0;
  }

  75% {
    background: radial-gradient(ellipse at right, colors.$color__blue--200 50% 90%, transparent 50%);
    opacity: 0;
  }

  100% {
    background: radial-gradient(ellipse at right, colors.$color__blue--400 50% 90%, transparent 50%);
    opacity: 0.5;
  }
}